/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, BlobInputList, Table, TableBody, TableRow, CCell, TableHead, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

interface Props  extends InternalItemProps{
    config?: any[];    //有配置模式的 : 表对象的默认取值；
}

const cb持证项输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={3} datalist={['RT-Ⅱ', 'RT-Ⅲ']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb有效期输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={3} datalist={['2022年07月至2027年06月']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
export const config无损资格=[
    ['姓名','n',70],['证书编号','z',172,],['持证项目','x',290,cb持证项输入],['有效期','v',195,cb有效期输入]
] as Each_ZdSetting[];
export const itemA无损资格=['损资表','损资备注' ];
export const NonDestructive=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA无损资格,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config无损资格, table:'损资表', });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>
                {render}
                备注：
                <BlobInputList value={inp?.损资备注 || ''} rows={7} datalist={['以上检测人员现场检测期间，检测证均在有效期内。']}
                               onListChange={v => setInp({ ...inp, 损资备注 :v || undefined}) } />
                { children }
            </InspectRecordLayout>
        );
} );

//无损检测人员资格
export const NonDestructiveVw= ({orc, rep,title} :{orc:any, rep:any,title?:string}
) => {
    //两半各安显一排模式的用：const [renderRows,]=useRep2hTableViewer(config焊接资格, '附设表', orc,true,true,true);
    return <>
        <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}} }>
            <Text id='NonDestructive' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>{title??'无损检测人员资格明细表'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["12.5%", "%" ] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-7rem'}}} tight  miniw={800}>
            <TableBody>
                <TableRow>
                    <CCell>工程名称</CCell>
                    <CCell>{orc?.工程名称}</CCell>
                </TableRow>
            </TableBody>
        </Table>
        <Table fixed={ ["4%", "8.5%", "21%","%", "31%"] } css={{borderCollapse: 'collapse', }} tight  miniw={800}>
            <TableHead>
                <RepLink rep={rep} tag={'NonDestructive'}>
                    <TableRow>
                        <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell>姓名</CCell><CCell>证书编号</CCell>
                        <CCell>持证项目</CCell><CCell>有效期</CCell>
                    </TableRow>
                </RepLink>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'NonDestructive'}>
                    { (orc?.损资表||[{}])?.map((o: any, i: number) => {
                        if(!(orc?.损资表?.length>0))  return (<TableRow key={i}><CCell colSpan={5}>空表</CCell></TableRow>);
                        return (
                            <TableRow key={i}>
                                <CCell>{i+1}</CCell>
                                <CCell>{o.n}</CCell>
                                <CCell>{o.z}</CCell>
                                <CCell css={{whiteSpace:'pre-wrap'}}>{o.x}</CCell>
                                <CCell>{o.v}</CCell>
                            </TableRow>
                        );
                    } ) }
                    <TableRow>
                        <Cell colSpan={5}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
                        }}>备注：<br/>{orc.损资备注}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
